<template>
    <div class="alltime">
        <span :style="{'background-color':x.color}" :class="x.class" :txt="x.txt" v-for="(x,i) in d.alltime" :key="i"></span>
    </div>
</template>

<script setup>
    import { getCurrentInstance,reactive,watch } from 'vue'
    let { proxy } = getCurrentInstance()
    const props = defineProps({
        value: { type: Array, require: true, },
    })
    
    let d = reactive({
        alltime:[],
        times: [],
        colors:["#babcc5","#5bad85","#5677eb"],
    })
    let init = () => {
        props.value.forEach((t,i) => {
            d.times.push({
                start:new Date("2000-01-01 "+t.start),
                end:new Date("2000-01-01 "+t.end),
                color: d.colors[i%3],
                name: t.name
            })
        })
        //从早上7点到晚上11点，每隔5分钟，放入数组
        let startd = new Date('2000-01-01 07:00'), endd = new Date('2000-01-01 23:00')
        while(endd >= startd){
            let item = {start:startd, end:new Date(startd.getTime()+5*60*1000)}
            if(proxy.$utils.dateFormat(item.start,'mm')=="00"){
                item.class="line"
            }
            d.times.forEach(t => {
                // console.log(proxy.$utils.dateFormat(t.start,'hh:mm'), proxy.$utils.dateFormat(item.start,'hh:mm'))
                if(item.start.getTime() >= t.start.getTime() && t.end.getTime() >= item.end.getTime()){
                    item.color = t.color
                    item.class = ""
                    if(item.start.getTime() == t.start.getTime()){ //这是用来放文字的
                        item.txt = t.name + "("+proxy.$utils.dateFormat(t.start,'hh:mm') + "-" + proxy.$utils.dateFormat(t.end,'hh:mm')+")"
                    }
                }
            })
            d.alltime.push(item)

            startd = new Date(startd.getTime()+5*60*1000); //每次加5分钟
        }
    }
    init()
</script>

<style scoped>
    .alltime { display: flex; flex: 1; height: 30px; justify-content: space-around; }
    .alltime span { display: flex; flex: 1; font-size: 12px; }
    .alltime span.line { box-sizing: border-box; border-left: 1px solid #EAEAEA; }
    .alltime span[txt]::before { content: attr(txt); position: absolute; line-height: 30px; padding-left: 5px; 
        /* color: #FFFFFF; text-shadow: 0 0 1px #000000, 0 0 1px #000000;  */
    }
</style>